<script setup lang="ts">
import { onMounted } from 'vue';
import {
  getCurrentInstance,
  makePhoneCall,
  showModal,
  showToast,
  showLoading,
  reLaunch,
} from '@tarojs/taro';
import { PARK_CAR_LIST_QUERY, DELETE_PARK_CAR } from '/@/api/modules/parking/park-car';
import { getSysImgUrl } from '/@/utils/index';
import { state } from './state';
const params = getCurrentInstance().router?.params as {
  plateNo: string;
};

/**
 * 车辆查询
 */
function queryCar() {
  showLoading();
  PARK_CAR_LIST_QUERY({
    plateNo: decodeURI(params.plateNo),
    comQuery: { page: 1, pageSize: 10 },
  }).then((res) => {
    if (!res.content || !res.content.length) return;
    state.isExistItem = true;
    state.plateNo = res.content[0].plateNo;
    state.carPicUrl = res.content[0].carPicUrl;
    state.deptName = res.content[0].deptName;
    state.phone = res.content[0].phone;
    state.createByName = res.content[0].createByName;
  });
}

onMounted(() => {
  //清空数据，否则查询记录为空的时候显示上一个信息
  state.isExistItem = false;
  state.plateNo = '';
  state.carPicUrl = '';
  state.deptName = '';
  state.phone = '';
  state.createByName = '';
  queryCar();
});

/**
 * 拨打电话
 */
function phone(num?: string) {
  if (!num) {
    return;
  }
  makePhoneCall({
    phoneNumber: num!,
  });
}

function deleteCar() {
  showModal({
    title: '删除车辆',
    content: '您确定要删除车辆吗？',
    success: function (response) {
      if (response.confirm) {
        showLoading();
        DELETE_PARK_CAR({
          plateNo: decodeURI(params.plateNo),
        })
          .then((res) => {
            if (res.comResp?.code === 100) {
              reLaunch({
                url: '/pages/park/query/index',
              });
            } else {
              showToast({ title: '删除车辆失败', icon: 'error' });
            }
          })
          .catch();
      }
    },
  });
}
</script>

<template>
  <view class="park-query-result app-page--1">
    <app-navbar title="车辆详情" />
    <scroll-view class="app-page__wrapper" :scroll-y="true" :lower-threshold="100">
      <view class="park-query-result__wrapper" v-if="state.isExistItem">
        <view class="park-query-result-img-container">
          <image
            class="park-query-result-img-container__img"
            :src="getSysImgUrl(state.carPicUrl || '')"
          />
        </view>
        <nut-cell-group>
          <nut-cell title="车牌号码" :desc="state.plateNo || '_'" />
          <nut-cell title="车主姓名" :desc="state.createByName || '_'" />
          <nut-cell title="所在部门" :desc="state.deptName || '_'" />
          <nut-cell
            title="联系电话"
            :desc="state.phone || '_'"
            class="park-query-result__phone"
            @click="phone(state.phone)"
          />
        </nut-cell-group>
      </view>
      <view v-else class="park-query-result__empty">
        <text>暂无数据！</text>
      </view>
    </scroll-view>
    <view class="park-query-result__footer" v-if="state.isExistItem">
      <nut-button block type="danger" @click="deleteCar()"> 删除车辆 </nut-button>
    </view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>
